<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <iframe id="inlineFrameExample"
    title="Inline Frame Example"
	style="width:100%;height:100vh"
    src="https://www.baidu.com">
</iframe>

  1》开发环境(webpack)

  注意：不是所有的浏览器都支持es6语法

  package.json ==>npm init
  node_modules ==>npm install webpack -D
  webpack.config.js==>配置文件
  src(开发阶段目录)
    index.html
    index.js
    js
      01.js
      02.js
  public(生产阶段目录)

  babel把es6的语法转换为es5，es3

  babel-polyfill＝＝》很多语法的api不能转码,需要安装polyfill

2》知识点

    1》es6语法使用

      a>let
        1》作用域，只能在本代码块内有效
        2》不具有变量提升性（不能转码）
        3》不具有重复声明
      b>const(常量)
        1》常量的值就不能改变
        2》声明必须赋值
        3》对象（引用类型）。可以修改赋值

        场景：公司的地址，公司电话

      c>变量的解构赋值

        1》数组解构赋值

            格式: let [a,b,c] = [1,2,3]

            注意：
              1>如果匹配不到，则变量是undefined
              2>如果等号的右边不是数组(或者严格地说，不是可遍历的结构)，那么就报错

            默认值：

                let [a=true] = [];

        2》对象解构赋值

            格式： let {a,b,c} = {a:1,b:2,c:3}

            注意：
              1》如果匹配不到，则变量是undefined

            默认值:  let {a=true}

        3》字符串解构赋值

            格式： let [a,b,c] = '123'
            注意：
              1》如果匹配不到，则变量是undefined
        4》数值解构赋值
        5》布尔解构赋值
        6》函数解构赋值

      d>字符串的扩展

         1》Unicode

          注意：
            1》超出了FFFF范围 ： 𠮷
            2》解决超出不能正确识别的字符：{}
        2》新增方法：

           codePointAt() ==》可以识别32位的UTF-16字符。
           应用场景：判断当前字符是否大于＝＝》0xFFFF
           at()  ===》修正了charAt()不能解析大于0xFFFF字符的

        3》方法
          includes()：返回布尔值，表示是否找到了参数字符串。
          startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
          endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
          repeat()  : 返回一个新字符串，表示将原字符串重复n次。
          padStart():ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
          padEnd() :ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

        4》模版字符串

            格式:``
            加入内容：`${变量名称....}`

        5》标签模版

           alert() ===> alert``
           注意：
              1》加入变量，会先把字符串放入到一个数组中

      f>正则

          1》构造函数

              new RegExp(/xxx/ig,'i');
              参数2（修饰符）会覆盖前面的修饰符

          2》属性

            flags ＝＝》返回正则表达式的修饰符
            sticky ＝＝》看一看有没有开启y模式

          3》修饰符

            y : y和g特别像（全文匹配）
              区别：
                g:后面有就可以了
                y:从匹配后面第一个开始算
            u : 正确处理大于\uFFFF的 Unicode 字符

      g》数值扩展

        1》注意点

          parseInt()   parseFloat()
          都是在全局对象下(window)

          ES6:

            Number.parseInt()
            Number.parseFloat()

        2》Number对象新增方法

           Number.isFinite() : 检测一个数值是否有限
           Number.isNaN()    : 检测一个数值是否是NaN
           Number.isInteger() : 判断一个数值是否为整数

        3》Math对象新增方法

            Math.trunc()  :  去除小数部分，返回整数部分
            Math.sign()   : 判断一个数值是：整数，负数，0

            整数：1
            负数：－1
            0:0
            -0:-0
            其他:NaN

      h>函数的扩展

        1》函数参数的默认值

            function fn(obj=xx)

        2》函数作用域
        3》rest  (...)
        4》箭头函数

          (参数1,参数2)=>{

          }

          1》arguments对象
          2》不能new
          3》this指向

      i>数组的扩展

        1》运算符(...)
        2》方法

          1》Array.from() : 把一个看起来类似于数组的对象，转换成真正的数组
          2》Array.of()   : 把一组值，转换为数组
          3》copyWithin() : 将指定位置的成员复制到其他位置（会覆盖原有成员）,最后返回新的数组

              参数1》target ：从该位置开始替换数据。
              参数2》start  ：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
              参数3》end    ：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
          4》find()
          5》findIndex()
          6》fill()   : 填充数组

              参数1》替换成什么
              参数2》开始位置
              参数3》结束位置

          7》得到key  value
              数组实例的 entries()，keys() 和 values()

          8》includes() : 返回的是布尔值
      
    j>对象的拓展


          1》属性的简洁表示法＊＊＊＊
            
            let obj = {
              a
            }

          2》属性名表达式
          3》方法的 name 属性
          4》Object.is() : 比较
              ==
              ===
          5》Object.assign()

            方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

          6》对象属性的可枚举性和遍历
            
            Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

          7》遍历

              Object.keys()
              Object.values()
              Object.entries() 
    
    k》class基本语法

        格式：
          class 名称{
            
            constructor(){

            }
            
            方法名称1(){

            }
            方法名称2(){

            }

          }

          new 名称();

        ***class实现继承

          格式：
              class 子类 extends 父类{
                    
                  constructor(){

                    super() //在最前面放置

                  }

              }
    l》symbol
      
      作用：解决命名冲突
      概述：
        1》一种新的原始数据类型Symbol
        2》表示独一无二的值
      使用：
        1》symbol
        2》symbol.for()
      取值：
        Object.getOwnPropertySymbols
        Reflect.ownKeys
        ***以上2个方法都是返回数组***

    m》Set
      
      1》是什么？

        1》新的数据结构，类似于数组
        2》值都是唯一

          ***可以去重,要看数据类型的

      2》使用方法
        
         new Set()

         add    ==>增
         size   ==>length
         clear  ==>全删
         delete ==>删除某一个
         has    ==>查

      3》遍历

        keys()：返回键名的遍历器
        values()：返回键值的遍历器
        entries()：返回键值对的遍历器
        forEach()：使用回调函数遍历每个成员

      4》WeakSet
          
          方法：
              add
              delete
              has

＊＊＊＊set和weakset区别＊＊＊＊

   1>weakset的值必须是对象
   2>方法不同
   3>不可遍历
  
  n>map

    1>数据结构
    2>map的作用
       key可以是任意的内容

    3>使用

      长度：size
      删除: delete、clear
      增：set()
      查：get()
    
    4>遍历
      keys()：返回键名的遍历器。
      values()：返回键值的遍历器。
      entries()：返回所有成员的遍历器。
      forEach()：遍历 Map 的所有成员。

    5>WeakMap

      map和weakmap区别
        
       1》是没有遍历操作
       2》也没有size、clear属性 
       3》垃圾回收机制
   
  n》proxy (代理)

    1》理解：
        
        源对象
        代理（拦截）
        操作
        
        易驰衣服 ： 供应商
        代理（张先生）
        用户（买）

    2》使用（拦截）：

      get() : 拦截对象属性的读取
      set() : 拦截对象属性的设置
      deleteProperty() :拦截删除对象key操作
      
  o》Reflect

    Reflect对象的设计目的有这样几个：

      1》以后方法Reflect对象身上
      2》修改某些Object方法的返回结果
      3》统一标准
        delete obj[key]
        key in obj

        Reflect.has()
        Reflect.deleteProperty(obj, name)

      4》使用方便

  p》 Promise

      理解：解决异步编程的一张方案
           让异步编程写法感觉像是同步感觉
      
      new Promise(function(resolve, reject){
          
      })
        .then(function(){
            
        })
        .then(function(){
            
        })

  q> Iterator 和  for...of
  
    1》
      for...of  格式：
                for(let k of xx)

    2》Iterator（遍历器）

       理解：Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制
  
  r》Generator

      1》函数
      2》异步编程解决方案

        格式：
            let fn = function* (){
              yield
            }
  s》Module 模块
        
      引入文件：import './common/index'
      引入所有：
          import * as obj from './common';
      抛出：
        export 
        export default





3》案例（项目）

</body>
</html>